<template>
  <div class="pore">
    <div
      v-for="(i, index) in tipData"
      class="mgt40 mcell"
      @click="showPicker(index)"
    >
      <div class="boxMsg" :class="i.isError ? 'boxMsgTip' : ''">
        <div>{{ i.name }}</div>
        <div class="flex jcsb fs18 mgt10">
          <div v-if="i.value" class="msg">{{ i.value }}</div>
          <div v-else class="c9 msg">{{ i.msg }}</div>
          <van-icon name="arrow" class="c9" />
        </div>
      </div>
      <div class="c9 fs14">{{ i.bMsg }}</div>
    </div>
    <!-- 弹出层 -->
    <van-popup v-model="modol" :position="position" v-if="type==0">
      <van-picker
        show-toolbar
        :columns="tipData[showNum].list"
        v-show="show"
        class="w713"
        @change="onChange"
        :default-index="0"
        ref="upicker"
        
      >
        <template #default>
          <div class="pd8 flex jcsb w100">
            <div class="c9 pd10" @click="close">取消</div>
            <div class="fwb pd10">{{ tipdata[showNum].name }}</div>
            <div class="prColor pd10" @click="cfk">确认</div>
          </div>
          <div v-if="tipData[showNum].list[0].values">
            <div class="cheng">x</div>
            <div class="gang">-</div>
          </div>
        </template>
      </van-picker>
    </van-popup>
  </div>
</template>
<style>
@import "../ui/vant-ui/ui.css";
@import "../public.css";
.boxMsg {
  padding: 20px 0 10px 0;
  border-bottom: 1px solid #eee;
}
.boxMsgTip {
  border-bottom: 1px solid orange;
}
.msg {
  width: 270px;
  font-size: 16px;
  white-space: pre-wrap;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cheng{
    position: absolute;
    right: 130px;
    bottom: 110px;
    font-size: 22px;
    color: #000;
    z-index: 100;
  }
  .gang{
    position: absolute;
    left: 130px;
    bottom: 110px;
    font-size: 32px;
    color: #000;
    z-index: 100;
  }
  .tbox{
    position: absolute;
    bottom: 0;
  }
  @media (min-width:500px) {
    .msg{
      width: 400px;
    }
    .cheng{
      right: 160px;
      bottom: 115px;
    }
    .gang{
      left: 160px;
      bottom: 115px;
    }
    .w713{
      width: 513px;
    }
  }
</style>
<script>
module.exports = {
  name: "ucell",
  data() {
    return {
      tipData: [],
      show: false,
      showNum: 0,
      hub:'',
      modol:false,
      position:'',
    };
  },
  props: ["tipdata",'type'],
  created() {
    this.position = window.innerWidth>500?'center':'bottom'
    this.tipData = this.tipdata;
  },
  watch:{
    type(val){
      if(val == 0){
        this.modol = true;
      }
    }
  },
  methods: {
    cfk() {
      let hub = this.$refs.upicker.getValues();
      if(this.tipData[this.showNum].name == '薪资范围'){
        this.tipData[this.showNum].value = `${hub[0]}-${hub[1]}x${hub[2]}`;
      }else if(this.tipData[this.showNum].name == '工作地址'){
        this.tipData[this.showNum].value = `${hub[0].text}-${hub[1].text}-${hub[2].text}`;
      }
      else{
        this.tipData[this.showNum].value = hub[0];
      }
      this.modol = false;
    },
    onChange(picker, value) {
      // this.hub = value;
    },
    showPicker(index) {
      this.hub = '';
      this.show = true;
      this.modol = true;
      this.showNum = index;
    },
    close(){
      this.show = false;
      this.modol = false;
    }
  },
};
</script>
